import React, { useEffect, useState, useRef } from 'react';
import styles from './cart.less';
import {
  AutoSizer,
  List,
  WindowScroller,
  CellMeasurerCache,
  CellMeasurer,
  Grid,
} from 'react-virtualized';
import 'react-virtualized/styles.css'; // only needs to be imported once
import { Checkbox, Divider, Button, Select } from 'antd';
import cart from './query.json';
import clsx from 'clsx';
import classnames from 'classnames/bind';


const { Option } = Select;
const cls = classnames.bind(styles);

const cache = new CellMeasurerCache({
  defaultHeight: 50,
  fixedWidth: true,
});

function getClassName({ columnIndex, rowIndex }) {
  const rowClass = rowIndex % 2 === 0 ? styles.evenRow : styles.oddRow;

  return clsx(rowClass, styles.cell, {
    [styles.centeredCell]: columnIndex > 2,
  });
}

export default function() {
  const [cartList, setCartList] = useState([]);

  function onchange(index) {
    console.log('index', index);
  }

  useEffect(() => {
    console.time('cart数据扁平化耗时');
    const result = cart.data.cartItemList.reduce((total, cur) => {
      total.push(cur);
      Array.prototype.push.apply(total, cur.cartSkuInfoList);
      return total;
    }, []);
    setCartList(result);
    console.timeEnd('cart数据扁平化耗时');
  }, []);

  function rowRenderer({ columnIndex, key, index, style, parent, rowIndex }) {
    const classNames = getClassName({ columnIndex, rowIndex });

    return (
      <>
        <CellMeasurer cache={cache} columnIndex={0} key={key} parent={parent} rowIndex={rowIndex}>
          {({ measure, registerChild }) => (
            <div style={style} className={cls('mainCeil')}>
              {Array.isArray(cartList[rowIndex]?.cartSkuInfoList) ? (
                <div style={{ background: 'red' }} onClick={onchange.bind(null, rowIndex)}>
                  <p> {cartList[rowIndex]?.cartPerformance?.eventNameSc}</p>
                  <p> {cartList[rowIndex]?.cartPerformance?.eventNameSc}</p>
                  <img src={cartList[rowIndex]?.cartPerformance?.performancePoster} alt="" />
                </div>
              ) : (
                <div className={cls('childCeil')}>
                  <p style={{paddingRight:'30px'}}> child:::{rowIndex}</p>
                  <Select defaultValue="lucy" style={{ width: 120 }}>
                    <Option value="jack">Jack</Option>
                    <Option value="lucy">Lucy</Option>
                    <Option value="disabled" disabled>
                      Disabled
                    </Option>
                    <Option value="Yiminghe">yiminghe</Option>
                  </Select>
                </div>
              )}
            </div>
          )}
        </CellMeasurer>
      </>
    );
  }
  let listRef = useRef();

  return (
    <WindowScroller>
      {({ height, isScrolling, registerChild, scrollTop, width }) => (
        <div>
          <header style={{ height: '200px' }}>
            Table header
            <Button>排序</Button>
            <Checkbox>Check all</Checkbox>
          </header>
          {console.log('width', width)}
          <div ref={registerChild}>
            <Grid
              className={cls('body-grid')}
              autoHeight
              autoWidth
              isScrolling={isScrolling}
              scrollTop={scrollTop}
              height={height}
              columnCount={1}
              columnWidth={width}
              deferredMeasurementCache={cache}
              rowCount={cartList.length}
              cellRenderer={rowRenderer}
              rowHeight={cache.rowHeight}
              overscanRowCount={0}
              width={width}
            />
          </div>
        </div>
      )}
    </WindowScroller>
  );
}
